<template>
    <div class="body">
        <div class="search-content">
            <!-- <div>
                <p @click="changSelected">{{searchClass}}<i class="iconfont icon-xiala icon" :class="isShowSelect?'open':'hide'"></i></p>
            </div> -->
            <input type="text" placeholder="搜索订单" v-model="searchText" @keyup.enter="search">
            <!-- <button class="claer-btn" @click="clearSearch"><i class="iconfont icon-guanbifuceng"></i></button> -->
            <!-- <mt-button class="search-btn" @click="toSearch">搜索</mt-button> -->
        </div>
        <p class="hint" v-show="orderList.length == 0">最近没有订单~</p>
        <div class="loadmore">
            <mt-loadmore :bottom-method="loadBottom" :top-method="loadTop" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore" :bottomDistance="10">
                <div class="order-item" v-for="(item,index) of orderList" :key="index">
                     <p class="pay-time" v-if="!item.is_pay && item.status !== -4">请在{{payTime(item.create_time)}}前完成支付</p>
                    <div class="item-header">
                        <router-link :to="{path:'/info',query:{id:item.store.id}}" class="item-header">
                            <img :src="$store.getters.base_url+item.store.logo" alt="" class="logo">
                            <div>
                                <p class="shop_name">{{item.store.shop_name}}<i class="iconfont icon-you"></i></p>
                                <p class="create-time">{{timestampToTime(item.create_time)}}</p>
                            </div>
                        </router-link>
                        <p class="order-state" :style="item.status == -4?'color:#676767':!item.is_pay?'color:#676767':item.is_pay && 5 >= item.status >= 0 ?'color:#F0463C': -2 <= item.status <= -1?'color:#676767':'color:#F0463C'">{{item.status == -4?'已取消':!item.is_pay?'未支付':item.is_pay && item.status == 0?"已支付":item.status == 1?"商家已接单":item.status == 2?"配送员接单":item.status == 3?"派送中":item.status == 4?"已送达":item.status == 5?"已完成":item.status == 6?"已评价":item.status == 7?"系统评价":item.status == -1?"退款中":item.status == -2?"已退款":"拒绝退款"}}</p>
                    </div>
                    <p class="order_all">
                        <span v-if="item.order_detail">{{item.order_detail[0].goods_name}}等{{item.order_detail.length}}件商品</span>
                        <router-link :to="{path:'orderInfo',query:{order_no:item.order_no}}">
                            <i class="iconfont icon-gengduo" :style="item.status == -4?'color:#676767':!item.is_pay?'color:#676767':item.is_pay && 5 >= item.status >= 0 ?'color:#F0463C': -2 <= item.status <= -1?'color:#676767':'color:#F0463C'"></i>
                        </router-link>
                    </p>
                    <div>
                        <!-- <p class="create-time">订单编号:{{item.order_no}}</p> -->
                        <div v-for="(i,k) of item.order_detail" :key="k" class="item-details">
                            <!-- <img :src="$store.getters.base_url+i.goods[0].pic" alt="" class="order-pic"> -->
                            <!-- <div class="order-text"> -->
                                <div class="goods-info">
                                    <p>{{i.goods_name}}</p>
                                    <!-- <P v-if="i.type == 2" class="goods-details">{{i.meat_text}},{{i.veg_text}}</P> -->
                                </div>
                                <p>×{{i.goods_num}}</p>
                                <p>￥{{i.goods_price}}</p>
                                
                            <!-- </div> -->
                        </div>
                    </div>
                    <!-- <p>配送信息:</p>
                    <p class="create-time">{{item.school_name.name}}-{{item.dormitory_name.name}}-{{item.consignee_address}} - {{item.consignee_name}} - {{item.consignee_phone}}</p>
                    <p>备注:{{item.remark}}</p>
                    <div class="order-price">
                        <p>总价:{{item.total_price}}元</p>
                        <p>运费:{{item.delivery_price}}元</p>
                    </div> -->
                    <div class="btn-group" v-if="item.status !== -4">
                        <a :href="'tel:'+item.store.bank_phone"><mt-button class="btn">联系商家</mt-button></a>
                        <a :href="'tel:'+item.send.phone" v-if="item.status>1 && item.send_id"><mt-button class="btn">联系骑手</mt-button></a>
                        <!-- <p v-if="item.status === 4">{{item.send.phone}}</p> -->
                        <a :href="'tel:'+$store.getters.userInfo.operate_phone"><mt-button class="btn">投诉</mt-button></a>
                        <mt-button class="btn btn-1" v-show="item.status == 4" @click="UserArrive(item.order_no)">确认收货</mt-button>
                        <mt-button class="btn" v-show="item.status == 5" @click="$router.push({path:'/evaluate',query:{order:item.order_no}})">评价商品</mt-button>
                        <!-- <mt-button class="btn" v-show="item.is_pay&&item.status&&item.store.is_refues == 0 ||item.is_pay&&item.status == 1&&item.store.is_refues" @click="onRefund(item.order_no,item.pay_type)">取消订单</mt-button> -->
                        <mt-button class="btn" v-show="!item.is_pay" @click="pay(item.order_no)">支付</mt-button >
                        <mt-button class="btn" v-show="item.status == 2&&item.store.is_refues" @click="negotiate(item.order_no)">协商退款</mt-button>
                    </div>
                </div>
        </mt-loadmore>
        </div>
    </div>
</template>
<script>
import {orderList,pay,refund,userArrive,applyRefund,searchList,findOrdersStock} from '../api'
import {Toast,MessageBox} from 'mint-ui'
export default {
    data() {
        return {
            orderList:[],
            searchText:'',
            page:1,
            limit:10,
            allLoaded:false
        }
    },
    created(){
        this.orderlist();
    },
    methods:{
        payTime(time){
            time = time*1000+1000*60*this.$store.getters.userInfo.automatic_refuse;
            return new Date(time).toLocaleString().replace(/:\d{1,2}$/,' ');
        },
        search(){
            const data = {
                user_id:this.$store.getters.userInfo.id,
                page:this.page,
                limit:this.limit,
                text:this.searchText,
                token:this.$store.getters.token
            }
            searchList(data).then(res=>{
                // console.log(res);
                this.orderList = res.data;
            })
        },
        loadBottom(){
            this.page+=1;
            this.orderlist();
        },
        loadTop(){
            if(this.page>1){
                this.page-=1;
                this.orderlist();
            }else{
                Toast("已经是第一页了");
                this.$refs.loadmore.onTopLoaded()
            }
        },
        negotiate(order_no){
            MessageBox.prompt('请联系商家协商退款,商家同意即可立即退还?','').then(({ value, action }) => {
                const data = {
                    token:this.$store.getters.token,
                    order_no,
                    back_reason:value
                }
                if(!data.back_reason){
                    Toast('请填写退款原因')
                    return;
                }
                applyRefund(data).then(res=>{
                    // console.log(res);
                    Toast(res.msg)
                })
            });
        },
        UserArrive(order_no){
            const data = {
                token:this.$store.getters.token,
                order_no
            }
            userArrive(data).then(res=>{
                console.log(res);
                Toast(res.msg);
                this.orderlist();
            })
        },
        onRefund(order_no,pay_type){
            const data = {
                token:this.$store.getters.token,
                order_no,
                openid:this.$store.getters.userInfo.openid,
                type:1
            }
            refund(data).then(res=>{
                Toast(res.msg);
                this.orderlist();
            }).catch(err=>{
                Toast(res.msg);
            })
        },
        orderlist(){
            const data = {token:this.$store.getters.token,user_id:this.$store.getters.userInfo.id,page:this.page,limit:this.limit}
            orderList(data).then(res=>{
                console.log(res);
                this.orderList = res.data;
                this.$refs.loadmore.onBottomLoaded();
                this.$refs.loadmore.onTopLoaded();
                if(res.data.length < this.limit){
                    Toast("已经加载完所有数据啦~")
                    this.allLoaded = true;
                }
            })
        },
        pay(order_no){
            // findOrdersStock({order_no,token:this.$store.getters.token}).then(res=>{
            //     if(res.code == 201){
            //         Toast(res.msg);
            //         return;
            //     }
            // })
            const data = {token:this.$store.getters.token,order_no:order_no,openid:this.$store.getters.userInfo.openid}
            pay(data).then(res=>{
                // console.log(res)
                let params = res.data;
                        WeixinJSBridge.invoke(
                            'getBrandWCPayRequest', {
                                "appId":params.appId,     //公众号名称，由商户传入     
                                "timeStamp":params.timeStamp,         //时间戳，自1970年以来的秒数     
                                "nonceStr":params.nonceStr, //随机串     
                                "package":params.package,     
                                "signType":params.signType,         //微信签名方式：     
                                "paySign":params.paySign //微信签名 
                            },
                            function(res){
                                console.log(res);
                            if(res.err_msg === "get_brand_wcpay_request:ok" ){
                            // 使用以上方式判断前端返回,微信团队郑重提示：
                                    //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                                    // this.$router.push({path:'payState',query:{state:true}})
                                    
                                    window.location.href = `http://${window.location.host}/userplat/#/payState?state=1`
                            }else{

                                    // this.$router.push({path:'payState',query:{state:false}})
                                    window.location.href = `http://${window.location.host}/userplat/#/payState?state=0`
                            } 
                        }); 
            })
        }
    }
}
</script>
<style scoped>
.body {
    background: #eee;
    min-height: Calc(100vh - 7rem);
}
.body::before{
    display: table;
    content:""
}
.order-item {
    width:90%;
    min-height: 5rem;
    background: #fff;
    margin:1rem auto;
    padding: 2%;
    border-radius: 0.2rem;
    /* padding-bottom: 1rem; */
}
    .search-content{
        width: 100%;
        height: 3rem;
        display: flex;
        align-items: center;
        justify-content: space-around;
        /* margin-top: 0.2rem; */
        position: relative;
        background: #fff;
    }
    .search-content input{
        width: 90%;
        height: 2rem;
        border: 2px solid #ccc;
        border-radius: 1.5rem;
        padding: 0 0.5rem;
        font-size: 1rem;
        background: #f5f5f5;
    }
    .search-content input:focus{
        border: 5px solid #F1463C;
        outline: none
    }
    .search-content input::placeholder{
        text-align: center;
    }
.item-header {
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #333;
}
.logo{
    width: 3rem;
    height: 3rem;
    border-radius: 5px;
    margin-right: 1rem;
}
.order-state {
    font-size: 0.9rem;
    color: #666;
    align-self: flex-start;
    line-height: 2rem;
}
.order-pic {
    height: 4rem;
    width: 4rem;
    border-radius: 15px;
    margin-right: 1rem;
}
.item-details{
    display: flex;
    align-items: center;
    margin-left: 4rem;
    line-height: 2rem;
    font-size: 0.9rem;
    justify-content: space-between;
}
.item-details p{
    width: 33%;
    text-align: right;
}
.item-details:first-child{
    border-top: 0.04rem solid #d8d8d8;
}
.item-details p:first-child{
    text-align: left;
}
.create-time {
    font-size: 1rem;
    color: #888;
}
/* .order-text {
    font-size: 0.8rem;
    color: #666;
    height: 100%;
    display: flex;
    justify-content: space-around;
} */
.order-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 0.8rem;
    line-height: 1.5rem;
}
.btn {
    width: 5rem;
    height: 2rem;
    border-radius: 5px;
    margin:1rem 0;
    background: #fff;
    font-size: 1rem;
    color: #333;
    border: 0.04rem solid #333;
    margin-left: 0.4rem;
}
.btn-1{
    color: #F0463C;
    border-color: #F0463C;
}
.shop_name{
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.4rem;
}
.shop_name .iconfont{
    margin-left: 0.5rem;
}
.btn-group{
    display: flex;
    justify-content: flex-end;
}
.hint {
    text-align: center;
    line-height: 5rem;
    font-size: 1rem;
}
.order_all{
    margin-left: 4rem;
    line-height: 2rem;
    font-weight: bolder;
    font-size: 0.9rem;
}
.order_all .iconfont{
    float: right;
    font-weight: 500;
    font-size: 1.5rem;
}
.loadmore{
    height: Calc(100vh - 11rem);
    overflow: auto;
}
.pay-time{
    text-align: right;
    padding-bottom: 0.6rem;
    color: #F0463C;
    border-bottom: 1px solid #ccc;
    font-size: 0.8rem;
    margin-bottom: 0.4rem;
}
.goods-info{
    width: 50%;
}
.goods-info p{
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    line-height: 1rem;
}
.goods-details{
    font-size: 0.5rem;
}
</style>